<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html{
				background-color:#ddd;
			}
			body{
				margin:0px;
			}
			#banner img{
				display:block;
				width:99.3%;
				border:5px solid blue;
				border-top:none;
			}
			#navigation{
				width:99.3%;
				border:5px solid white;
				height:80px;
				line-height:80px; 
				text-align:center; 
				background-color:black;
			}
			.nav{
				margin:0px 15px;
				text-decoration:none;
			}
			a{
				color:white;
			}
			a:hover{
				color:red;
			}
			#bottom{
				height:40px;
				line-height:40px; 
				text-align:center; 
				font-size:14px; 
				color:grey
			}
			.active{
				color:red;
			}
		</style>
		<script type="text/javascript" src="jquery-3.4.1.js"></script>
	</head>
	<body >
		<div id="navigation">
			<a href="#" class="nav active" >首页</a>
			<a href="#" class="nav">关于王力</a>
			<a href="#" class="nav">产品世界</a>
			<a href="#" class="nav">新闻中心</a>
			<a href="#" class="nav">网络事件</a>
			<a href="#" class="nav">联系我们</a>
			<a href="#" class="nav">关于我们</a>
			<a href="#" class="nav">网络事件</a>
		</div>
		
		<div id="banner">
			<img src="img/1.jpg" alt="error">
		</div>
		
		<div id="bottom" >
			版权所有：浙江王力门业有限公司 技术支持派别网络
		</div>
		<script type="text/javascript">
			$(".nav").click(function(){
				
				var index = $(this).index();//获取当前操作元素位于第几个
				
				$(".nav").removeClass("active");
				$(".nav").eq(index).addClass("active");//eq()-->0开始
				
				/* $(".nav").removeClass("active").eq(index).addClass("active"); */
			})
		</script>
	</body>
</html>
